<template>
  <div class="product-detail">
    <div @click="fly2('/')">首页</div>
    <div class="container">
      <div class="product-image">
        <img :src="require('@/assets/' + goods.img)" alt="Product Image" class="image">
      </div>
      <div class="product-info">
        <h1 class="product-title">{{ goods.description1 }}</h1>
        <div class="product-sales">销量：{{ goods.count }}</div>
        <div class="product-price">
          <el-select v-model="value" placeholder="请选择" class="select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="product-brand" @click="fly2('/category/?categoryId='+goods.category)">分类：{{ goods.category }}</div>
        <div class="product-quantity">
          <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" class="quantity"></el-input-number>
        </div>
        <div class="product-actions">
          <el-button type="primary" class="action-button" @click="fly1('/pay/?id='+user)">购买</el-button>
          <el-button type="success" @click="fly('/shopcar/?Id='+Id)" class="action-button">加入购物车</el-button>
        </div>
      </div>
    </div>
    <div class="product-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品详情" name="first">
          <div class="image" v-html="goods.imgs"></div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    let result = this.$route.query.id;

    return {
      user: JSON.parse(localStorage.getItem('bikeId')),
      Id: result,
      imgs:{},
      goods: {},
      activeName: 'first',
      // imgs: {},
      num: 1,
      options: [{
        value: '选项1',
        label: null
      }, {
        value: '选项2',
        label: null
      }],
      value: '',
      label: ''
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {

      // this.imgs = '<p><img src="http://localhost:8090/山地车/1/1.12.jpg" style="align-content: center"/></p>>';
      let result = await this.$axios.get('/bikesel/' + this.Id);
      this.goods = result.data.data;
      console.log(this.goods.imgs)
      this.options[0].label = this.goods.dayPrice + "元/天";
      this.options[1].label = this.goods.monthPrice + "元/月";
      console.log(this.options);
    },
    async handleClick(tab, event) {
      console.log(tab, event);
    },
    async fly(url) {
      localStorage.setItem('fool','2');
      localStorage.setItem('f','1');
      localStorage.setItem('count', this.num);
      localStorage.setItem('pron', this.goods.description1);
      localStorage.setItem('img', this.goods.img);
      console.log(this.label);
      if (this.value == '选项1') {
        console.log(this.options[0].label);
        localStorage.setItem('cost', this.goods.dayPrice);
        console.log(this.goods.dayPrice);
        localStorage.setItem('time', '天');
        location.href = url;
      } else if (this.value == '选项2') {
        console.log(this.options[1].label);
        localStorage.setItem('cost', this.goods.monthPrice);
        console.log(this.goods.monthPrice);
        localStorage.setItem('time', '月');
        location.href = url;
      } else {
        alert('选了没啊，你就提交');
      }
    },
    async fly1(url) {
      localStorage.setItem('f','1');
      localStorage.setItem('count', this.num);
      localStorage.setItem('pron', this.goods.description1);
      localStorage.setItem('img', this.goods.img);
      localStorage.setItem('b',this.Id);
      console.log(this.label);
      if (this.value == '选项1') {
        console.log(this.options[0].label);
        localStorage.setItem('cost', this.goods.dayPrice);
        console.log(this.goods.dayPrice);
        localStorage.setItem('time', '天');
        location.href = url;
      } else if (this.value == '选项2') {
        console.log(this.options[1].label);
        localStorage.setItem('cost', this.goods.monthPrice);
        console.log(this.goods.monthPrice);
        localStorage.setItem('time', '月');
        location.href = url;
      } else {
        alert('选了没啊，你就提交');
      }
    },
    async fly2(url) {
     location.href=url
    }
  }
};

// <img src="http://localhost:8090/山地车/1/1.12.jpg" style="max-width: 100%;" contentEditable="false"/>
// <img src="http://localhost:8090/山地车/1/1.13.jpg" style="max-width: 100%;" contentEditable="false"/>
//
// <img src="http://localhost:8090/山地车/15/15.12.jpg" style="max-width: 100%;"
//      contentEditable="false"/>
// <img src="http://localhost:8090/山地车/15/15.13.jpg" style="max-width: 100%;"
//      contentEditable="false"/>
</script>
<style>
.product-detail {
  background-color: grey;
}
.container {
  width: 60%;
  margin: 20px auto;
  min-height: 1000px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.product-image .image {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
.product-image .image:hover {
  transform: scale(1.05);
}
.product-info {
  padding: 20px;
}
.product-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}
.product-sales {
  color: #FF6347;
  font-size: 18px;
  margin-bottom: 40px;
  text-align: center;
}
.product-price .select {
  width: 100%;
  margin-bottom: 40px;
}
.product-brand {
  color: #4682B4;
  font-size: 18px;
  margin-bottom: 40px;
  text-align: center;
}
.product-quantity {
  margin-top: 80px;
  text-align: center;
}
.product-actions {
  margin-top: 20px;
  text-align: center;
}
.action-button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 5px;
}
.action-button:first-child {
  background-color: #409EFF;
  border-color: #409EFF;
}
.action-button:last-child {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.product-tabs {
  margin-top: 20px;
}
.el-tabs__nav-wrap {
  margin-bottom: 20px;
}
.el-tab-pane {
  padding: 20px;
}
.el-tab-pane img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* Center the images */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
.el-tab-pane img:hover {
  transform: scale(1.05);
}
.image{

  align-content: center;

}
</style>

<style>


</style>